<!--
 * @Author: huang liang miao 1127255342@qq.com
 * @Date: 2024-08-30 14:55:53
 * @LastEditors: huang liang miao 1127255342@qq.com
 * @LastEditTime: 2024-11-28 08:58:23
 * @FilePath: \dcy-web\apps\admin\components\UserManagement\RoleInfoModal.vue
 * @Description: 角色增改查弹窗
-->
<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { createRoleReq, updateRoleTypeReq } from '@/api/system/role/index'

const props = defineProps<{
  visible: boolean
  visibleType?: number // 弹窗类型 1、新增；2、编辑；3、查看
  roleInfo?: any
}>()
const emits = defineEmits(['closeModal'])
const formRef = ref()
const form = ref({
  name: props.roleInfo?.name || '',
  remark: props.roleInfo?.remark || '',
})

// 新增
const { run: createRole, loading: createLoading } = useRequest(createRoleReq, {
  // false 为自动执行
  manual: true,
  // 请求成功
  onSuccess: () => {
    ElMessage({
      message: '已新增',
      type: 'success',
    })
    emits('closeModal', true)
  },
  // 请求失败
  onError: () => {
  },
})
// 编辑
const { run: editRole, loading: editeLoading } = useRequest(updateRoleTypeReq, {
  // false 为自动执行
  manual: true,
  // 请求成功
  onSuccess: () => {
    ElMessage({
      message: '已编辑',
      type: 'success',
    })
    emits('closeModal', true)
  },
  // 请求失败
  onError: () => {
  },
})

function onSubmit() {
  if (props.visibleType === 3)
    return emits('closeModal')
  formRef.value.validate((valid) => {
    if (valid) {
      if (props.visibleType === 1) {
        return createRole({
          ...form.value,
        })
      }
      else if(props.visibleType === 2) {
        return editRole({
          id: props.roleInfo.id,
          ...form.value,
        })
      }
      emits('closeModal')
    }
  })
}

</script>

<template>
  <el-dialog
    v-model="props.visible"
    :title="props.visibleType === 1 ? '新增角色' : props.visibleType === 2 ? '编辑角色' : '查看详情'"
    width="600"
    :align-center="true"
    :close-on-click-modal="false"
    @close="emits('closeModal')"
  >
    <div>
      <el-form
        ref="formRef"
        :model="form"
        label-width="auto"
      >
        <el-form-item label="角色名称:" prop="name" :rules="{ required: true, message: '请输入角色名称', trigger: 'change' }">
          <el-input v-model.trim="form.name" placeholder="请输入角色名称" :disabled="props.visibleType === 3" allow-clear maxlength="10" />
        </el-form-item>
    
        <el-form-item label="备注:" prop="remark">
          <el-input v-model.trim="form.remark" placeholder="请输入" :rows="11" type="textarea" :disabled="props.visibleType === 3" allow-clear maxlength="50" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="emits('closeModal')">取消</el-button>
        <el-button type="primary" :loading="props.visibleType === 1 ? createLoading : editeLoading" @click="onSubmit">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
// .item{
  :deep(.el-input.is-disabled .el-input__inner),
  :deep(.el-textarea.is-disabled .el-textarea__inner){
    @apply: bg-[#f2f3f5];
    -webkit-text-fill-color: #4E5969;
  }
  :deep(.el-textarea__inner){
    @apply resize-none;
  }
  // :deep(.el-textarea-wrapper){
  //   @apply: border border-[#E5E6EB] bg-white h-[100px];
  // }
// }
</style>
